<template>
  <view class="container">
    <div class="list-block">
      <div v-if="card.length" class="title">我的卡片</div>
      <div v-else class="title">暂未绑定卡片</div>
      <div class="item-wrap" v-for="(item, index) in card" :key="index" @tap="$app.goPage(`/pages/card/index?id=${item.id}`)">
        <div class="row">
          <div class="font-l">{{ item.business_code }}</div>
          <button class="btn s" type="primary" @tap.stop="$app.goPage(`/pages/card/index?id=${item.id}`)">查看详情</button>
        </div>
        <div class="row">
          <div>语音</div>
          <div class="flex-set">
            <span class="color">{{ `已用 ${item.used_voice}分钟 / 总计 ${item.dose ? item.dose.voice : '??'}分钟` }}</span>
          </div>
        </div>
        <progress
          :color="(item.used_voice / (item.dose ? item.dose.voice : 0)) * 100 >= 100 ? 'red' : 'blue'"
          :percent="(item.used_voice / (item.dose ? item.dose.voice : 0)) * 100"
        />
        <div class="row">
          <div>流量</div>
          <div>
            <span class="color">{{ `已用 ${item.used_flow_size}MB / 总计 ${item.dose ? item.dose.flow : '??'}MB` }}</span>
          </div>
        </div>
        <progress
          :color="(item.used_flow_size / (item.dose ? item.dose.flow : 0)) * 100 >= 100 ? 'red' : 'blue'"
          :percent="(item.used_flow_size / (item.dose ? item.dose.flow : 0)) * 100"
        />
      </div>
    </div>

    <div class="input-wrap" :class="[light]">
      <image class="scan-btn" src="../../static/扫码.png" mode="" @click="scan"></image>
      <input
        class="input"
        @focus="light = 'light'"
        @blur="light = ''"
        :value="iccid"
        @input="iccid = $event.detail.value"
        placeholder="输入ICCID绑定我的卡片"
      />
    </div>

    <button class="btn bind" type="primary" @tap="bindCard">查找绑定</button>

    <!-- <button class="btn" type="primary" @tap="$app.goPage(`/pages/search/index`)">卡片激活</button> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      light: '',
      card: [],
      iccid: '',
    };
  },
  onShow() {
    this.getMyCards();
  },
  methods: {
    scan() {
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        success: (res) => {
          console.log(res);
          this.iccid = res.resultStr.split(',')[1]; // 当needResult 为 1 时，扫码返回的结果
        },
      });
    },
    async bindCard() {
      await this.$app.http('user/bindCard', { iccid: this.iccid, openId: this.$app.getData('openid') });
      this.getMyCards();
    },
    async getMyCards() {
      const res = await this.$app.http('user/getCardByOpenId', { openId: this.$app.getData('openid') });
      this.card = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin row {
  display: flex;
  align-items: center;
  margin: 10rpx 5rpx;
  padding: 5rpx 10rpx;
}

.container {
  .btn {
    margin: 40rpx;

    &.s {
      font-size: $font-m;
      padding: 5rpx 10rpx;
      line-height: 1.5;
      margin: 0;
    }

    &.bind {
      margin-bottom: 60px;
    }
  }

  .color {
    color: $text-color-3;
  }

  .title {
    font-size: $font-l;
    margin: 20rpx 10rpx;
    padding: 0rpx 20rpx;
    line-height: 1;
    font-weight: 700;
    border-left: 8rpx solid $text-color-3;
  }

  .list-block {
    padding: 10rpx 20rpx;

    .item-wrap {
      padding: 10rpx 20rpx;
      margin: 30rpx 10rpx;
      background-color: #fff;
      box-shadow: 0px 1px 8px rgba(#333, 0.3);
      border-radius: 15rpx;

      .row {
        justify-content: space-between;
        @include row;
      }
    }
  }

  .input-wrap {
    margin: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 10rpx;
    z-index: 1;
    position: relative;
    border: 1px solid #cecece;
    transition: all 0.3s;
    position: relative;

    .scan-btn {
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    .input {
      border-radius: 10rpx;
      padding: 10px 60px;
    }

    &.light {
      border: 1px solid $text-color-3;
    }
  }
}
</style>
